<template>
    <div class="list" ref="CityListWrapper">
        <div>
            <div class="area">
                <div class="title border-topbottom">当前城市</div>
                <div class="button-list">
                    <div class="button-wrapper">
                    <!-- <div 
                            class="button"
                            @click="handleCityClick(this.city)"
                        >
                            {{ this.city }}
                        </div>
                    -->
                        <router-link to="/" tag="div" 
                            class="button"
                        >
                            {{ this.city }}
                        </router-link>
                    </div>
                </div>
            </div>
            <div class="area">
                <div class="title border-topbottom">热门城市</div>
                            <div class="button-list">
                    <div 
                        class="button-wrapper"
                        v-for="item of hotCities"
                        :key="item.id"
                        @click="handleCityClick(item.name)"
                    >
                        <div class="button">{{ item.name }}</div>
                    </div>
                </div>
            </div>
            <div 
                class="area" 
                v-for="(item,k) in cities"
                :key="k"
                :ref="k"
            >
                <div class="title border-topbottom">
                    {{ k }}
                </div>
                <div class="item-list">
                    <div 
                        class="item border-bottom"
                        v-for="ele in item"
                        :key="ele.id"
                        @click="handleCityClick(ele.name)"
                    >
                        {{ ele.name }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
import { mapState, mapActions } from 'vuex'
export default {
    name:'CityList',
    props:{
        hotCities:Array,
        cities:Object,
        letter:String
    },
    mounted(){
        this.scroll = new BScroll(this.$refs.CityListWrapper,{ 
            mouseWheel: true, 
            click: true, 
            tap: true 
        })
        console.log(this.$store.state.city);
        
    },
    //better-scroll，默认它会阻止touch事件。所以在配置中需要加上click: true
    computed:{
        ...mapState(['city'])
    },
    watch:{
        letter(){
            if(this.letter){
                const ele = this.$refs[this.letter][0]
                this.scroll.scrollToElement(ele)
            }
            
        }
    },
    methods:{
        handleCityClick(city){
            // this.$store.dispatch("changeCity",city)
            // this.$store.commit("changCity",city)
            this.changeCity(city)
            this.$router.push('/')
        },
        ...mapActions(['changeCity'])
    }
}
</script>
<style lang="stylus" scoped>
    @import '~@/assets/styles/variables.styl';
    .border-topbottom
        &:before
            border-color:#ccc
        &:after
            border-color:#ccc 
    .border-bottom
        &:before
            border-color:#ccc
    .list
        overflow:hidden
        position: absolute
        top:1.58rem
        bottom:0
        left:0
        right:0

        .title
            line-height:.54rem
            background:#eee
            padding-left:.2rem
            color:#666
            font-size:.26rem
        .button-list
            overflow:hidden
            padding:.1rem .6rem .1rem .1rem
            .button-wrapper
                float: left
                width:33.33%
                .button
                    margin: .1rem
                    padding: .1rem 0
                    text-align:center 
                    border: .02rem solid #ccc
                    border-radius: .06rem
        .item-list
            .item
                line-height:.76rem
                padding-left:.2rem

    
</style>